<template>
	<view class="card" :style="{margin: `${margin}px`, width: `calc(100% - ${margin*2+10}px)`, background}">
		<view class="card_head" v-if="title">
			<view class="card_head_name">
				{{title}}
			</view>
		</view>
		<view class="card_main">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		title: String,
		margin: {
			type: Number,
			default: 0
		},
		background: {
			type: String,
			default: "linear-gradient(to bottom, #ebeff7, #fff)"
		}
	})
</script>

<style lang="scss" scoped>
	.card {
		border-radius: 15px;
		border: 3px solid #f7f8f9;
		box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
		position: relative;

		&_main {
			padding: 10px;
		}

		&_head {
			height: 40px;
			line-height: 40px;

			&_name {
				background: var(--color);
				width: fit-content;
				height: inherit;
				line-height: inherit;
				padding: 0 30px;
				position: absolute;
				top: -5px;
				left: 50%;
				transform: translate(-50%);
				border-radius: 0 0 15px 15px;
				color: #fff;
				font-size: 18px;
				font-weight: bold;
				white-space: nowrap;

				&::before {
					content: "";
					display: block;
					width: 20px;
					height: 20px;
					background: radial-gradient(circle at 0 100%, transparent, 20px, var(--color) 20px);
					position: absolute;
					top: 0;
					left: -19px;
				}

				&::after {
					content: "";
					display: block;
					width: 20px;
					height: 20px;
					background: radial-gradient(circle at 100% 100%, transparent, 20px, var(--color) 20px);
					position: absolute;
					top: 0;
					right: -19px;
				}
			}
		}
	}
</style>